<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>权限列表</title>
    <link rel="stylesheet" type="text/css" th:href="@{/manager/easyui/themes/default/easyui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/manager/easyui/themes/icon.css}">
    <script type="text/javascript" th:src="@{/manager/easyui/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/manager/easyui/jquery.easyui.min.js}"></script>
	<script type="text/javascript">
	   $(function(){
	       $('#userlist').datagrid({  
			title:'权限列表',  
			iconCls:'icon-save',
            queryParams:{
                "name": null,
                "modelName": null
            },
            url:"/manager/permission/findAll",
			columns:[
                [
				{field:'id',title:'权限ID',width:100,align:'center'},  
				{field:'name',title:'权限名称',width:100,align:'center'},  
				{field:'url',title:'权限URL',width:200,align:'center'},  
				{field:'parentName',title:'权限所在模块',width:80,align:'center',formatter:function (val,row){
                        return val == null ?"顶级模块":val;
                    }}
			]
            ],
            singleSelect:true,
			pagination:true,
			toolbar: "#tooldiv"  
		});
		 //初始化查询栏
		 $("#submit_search").linkbutton({ iconCls: 'icon-search', plain: true })
            .click(function () {
                const tooldiv = document.getElementById('tooldiv');
                const inputs = tooldiv.querySelectorAll('input[type="text"]');
                var pager = $('#userlist').datagrid('getPager');
                // 直接设置数据网格的查询参数
                var queryParams = {
                    "page": 1,
                    "name": inputs[0].value,
                    "modelName": inputs[1].value
                };
                $('#userlist').datagrid('options').queryParams = queryParams;
                $('#userlist').datagrid('reload');
                pager.pagination('refresh', {
                    pageNumber: 1
                });
            });
          
          //初始化修改窗口  
         $('#dd').dialog({
			    title: 'My Dialog',
			    width: 700,
			    height: 500,
			    closed: true,
			    cache: false,
			    href: '',
			    modal: true,
			    iconCls: 'icon-save',
                buttons: [{
                    text:'提交',
                    iconCls:'icon-ok',
                    handler:function(){
                        if ($('#dd input[name="name"]').eq(2).val().trim() === "" || $('#dd select.easyui-combobox').val() === "-1") {
                            alert("权限名称内容或所属模块内容不能为空!");
                        }else {
                            $.ajax({
                                dataType: "json",
                                url: "/manager/permission/modify",
                                data: {
                                    "id": $("#dd input.easyui-textbox:eq(0)").textbox("getValue"),
                                    "name": $("#dd input.easyui-textbox:eq(2)").textbox("getValue"),
                                    "moduleId": $("#dd select.easyui-combobox").combobox('getValue')
                                },
                                success: function (result) {
                                    if (result.status == 200) {
                                        alert(result.msg);
                                        var selectedRow = $("#userlist").datagrid('getSelected');
                                        var index = $("#userlist").datagrid('getRowIndex', selectedRow); // 获取行的索引
                                        $("#userlist").datagrid('updateRow', {
                                            index: index,
                                            row: {
                                                parentName: $("#dd select.easyui-combobox").combobox('getText'),
                                                name: $("#dd input.easyui-textbox:eq(2)").textbox("getValue")
                                            }
                                        });
                                        $('#dd').dialog('close');
                                    }
                                },
                                error: function (xhr, status, error) {
                                    alert("请求失败: " + xhr.responseText); // 处理 AJAX 请求错误
                                }
                            });
                        }
                    }
                },{
                    text:'关闭',
                    handler:function(){
                        $('#dd').dialog('close');
                    }
                }]
			});
            
	   });

	   function openedit(){
           var selectedRow = $("#userlist").datagrid('getSelected');
           if(selectedRow){
               $.ajax({
                   dataType: "json",
                   url: "/manager/permission/findById",
                   data: {
                       "id": selectedRow.id
                   },
                   success: function (result) {
                       if (result.status == 200) {
                           $("#dd input.easyui-textbox:eq(0)").textbox("setValue", result.data.id);
                           $("#dd input.easyui-textbox:eq(1)").textbox("setValue", result.data.url);
                           $("#dd input.easyui-textbox:eq(2)").textbox("setValue", result.data.name);
                           $("#dd select.easyui-combobox").combobox({});
                           var currentData = $("#dd select.easyui-combobox").combobox('getData');
                           var newData = [];
                           for(var i=0;i<result.data.modules.length;i++){
                               newData.push({ "text": result.data.modules[i].name, "value": result.data.modules[i].id })
                           }
                           var updatedData = currentData.concat(newData);
                           $("#dd select.easyui-combobox").combobox('loadData', updatedData);
                           $("#dd select.easyui-combobox").combobox('setValue', result.data.parentid === null ? 0 :result.data.parentid);
                           $('#dd').dialog('open');
                       }
                   },
                   error: function (xhr, status, error) {
                       alert("请求失败: " + xhr.responseText); // 处理 AJAX 请求错误
                   }
               });
           }else{
               alert("请选中列表中对应的信息!");
           }
	   }
	</script>
</head>
<body>
  <div id="tooldiv">
      <input type="text"  placeholder="请输入查询权限名称"/>
      <input type="text"  placeholder="请输入查询模块名称"/>
      <a id="submit_search">搜索</a>
      <a  class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="openedit();">修改</a>
  </div>
  <table id="userlist"></table>
    <div id="dd">
           <div align="center" style="margin-top: 30px">
            <form id="ff" method="post">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="name" style="width:50%" data-options="label:'权限ID:'" readonly="readonly"/>
            </div>
             <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="name" style="width:50%" data-options="label:'权限url:'" readonly="readonly"/>
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="name" style="width:50%" data-options="label:'权限名称:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <select class="easyui-combobox" name="language" label="所属模块:" style="width:50%" data-options="multiple:false" >
                    <option value="-1">请选择模块</option>
                    <option value="0">顶级模块</option>
		        </select>
            </div>
        </form>
           </div>
    </div>
</body>
</html>